<template>
  <el-dialog :title="titleName+'-预约的学生'+'(单日限制人数：'+userOptionNumber+')'" :visible.sync="dialogVisible" @close="$emit('update:visible',false)"
             width="70%">
    <div class="table-body-box">
      <div class="hearder-search">
        <div class="breadcrumb-container">
          <div class="search_box">
            <el-select placeholder="年段" v-model="searWord.section_id" size="small" @change="sectionChange" class="w-140"
                       v-if="cornertype">
              <el-option :label="item.section_name" :value="item.id" v-for="(item, index) in sectionList"
                         :key="index"></el-option>
            </el-select>
            <el-select placeholder="班级" v-model="searWord.class_id" size="small" class="w-140" v-if="cornertype">
              <el-option :label="item.class_name" :value="item.id" v-for="(item, index) in classesList"
                         :key="index"></el-option>
            </el-select>
            <el-date-picker
                v-model="timeValue"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                size="small"
                :picker-options="pickerOptions1">
            </el-date-picker>
          </div>
          <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
          <download :type="ranking" :option="downloadOption"></download>
        </div>
        <div class="breadcrumb-container" style="height: 30px;">
          <span class="">总 {{ page.total }} 条数据</span>
        </div>
      </div>
      <el-table :data="arryList"
                height="400"
                :stripe="tableStyle.tableStripe"
                :border="tableStyle.tableBorder"
                tooltip-effect="dark"
                ref="table">
        <el-table-column
            label="头像"
            width="100"
            align="center">
          <template slot-scope="scope">
            <div class="checkImgDialog width60 mg-auto"
                 :style="{backgroundImage:'url('+scope.row.student.pic+')',backgroundSize:'cover',backgroundPosition:'center'}"
                 v-if="scope.row.student.pic">
              <!--            <div class="imgpreviewBody">-->
              <!--              <div class="imgpreview">-->
              <!--                <i class="el-icon-view"></i>-->
              <!--              </div>-->
              <!--            </div>-->
            </div>
            <!--          <img :src="imghttp+scope.row.pic" alt="" class="imgUserPic" v-if="scope.row.pic">-->
            <img src="@/assets/imageAdmin/defultimg.jpg" alt="" class="imgUserPic" v-else>
          </template>
        </el-table-column>
        <!--      <el-table-column label="班级" align="center">-->
        <!--        <template slot-scope="scope">-->
        <!--          {{scope.row.classes?scope.row.classes.class_name:'未记录'}}-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <el-table-column label="预约学生" prop="name" align="center">
          <template slot-scope="scope">
            {{ scope.row.student ? scope.row.student.name : '' }}
          </template>
        </el-table-column>
        <el-table-column label="学生班级" prop="name" align="center">
          <template slot-scope="scope">
            {{ scope.row.classes ? scope.row.classes.class_name : '' }}
          </template>
        </el-table-column>
        <el-table-column label="预约时间" prop="create_time" align="center"></el-table-column>
        <el-table-column label="参与时间" prop="use_time" align="center"></el-table-column>
      </el-table>
      <el-pagination
          :page-size="page.pagesize"
          layout="prev, pager, next"
          :total="page.total"
          :current-page="page.pageindex"
          @current-change="handleSizeChange">
      </el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">返 回</el-button>
      <!--      <el-button type="primary" @click="submitCheckFn">确 定</el-button>-->
    </div>
  </el-dialog>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import download from '@/components/common/download'

export default {
  name: 'studentMultiple',
  props: ['visible', 'userOption'],
  components: {
    download
  },
  data () {
    return {
      dialogVisible: this.visible,
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      // type 0 过去 1 未来
      editForm: {
        p: '',
        name: '',
        corner_id: 0,
        type: 1
      },
      // search
      classesListNew: [],
      sectionList: [],
      classesList: [],
      cornertype: true,
      searWord: {
        name: '',
        section_id: '',
        class_id: '',
        start_time: '',
        end_time: '',
        corner_id: 0,
        type: 1,
        p: 1
      },
      userOptionNumber:0,
      arryList: [],
      titleName: '',
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      timeValue: '',
      ranking: 'cornerAdmin',
      downloadOption: {
        section_id: '', // 年段id
        class_id: '',
        type: 1, // 1 未来 0 历史
        corner_id: 0
      }
    }
  },
  watch: {
    visible () {
      this.dialogVisible = this.visible
      console.log('收到的数据：', this.userOption)
      if (this.visible) {
        this.titleName = this.userOption.name
        this.searWord.corner_id = this.userOption.id
        this.downloadOption.corner_id = this.userOption.id
        this.userOptionNumber = this.userOption.number
        this.classList()
        this.InitFn()
      }
    }
  },
  created () {
    console.log('userOption:',this.userOption)
  },
  methods: {
    // 初始化
    InitFn () {
      // type 0 过去 1 未来；class_id start_time end_time
      this.searWord.p = this.page.pageindex
      this.$fetch(this.api.admin_corner_apply_user, this.searWord).then((response) => {
        if (response.code === 0) {
          for (let i in response.list.data) {
            let line = response.list.data[i].create_time.split(' ')
            let line_a = line[1].split(':')
            response.list.data[i].create_time = line[0] + ' ' + line_a[0] + ':' + line_a[1]
          }
          this.arryList = response.list.data
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    submitCheckFn () {
      console.log('applyBookBox:', this.applyBookBox)
      if (JSON.stringify(this.applyBookBox) === '{}') {
        this.$message({
          message: '请填特定的学生',
          type: 'error'
        })
      } else {
        this.$emit('studentFn', JSON.parse(JSON.stringify(this.applyBookBox)))
        this.dialogVisible = false
      }
    },
    // 分页
    handleSizeChange (val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 搜索
    searchBtn () {
      console.log('时间', this.timeValue)
      console.log('neirogn:', this.searWord)
      this.page.pageindex = 1
      this.searWord.start_time = this.timeValue ? this.timeValue[0] : ''
      this.searWord.end_time = this.timeValue ? this.timeValue[1] : ''
      this.InitFn()
    },
    sectionChange (val) {
      for (let i in this.sectionList) {
        if (this.sectionList[i].id === val) {
          console.log('获取相应的', this.classesListNew[this.sectionList[i].section_name])
          this.classesList = this.classesListNew[this.sectionList[i].section_name]
          return
        }
      }
    },
    // 刷新页面
    refreshFn () {
      this.timeValue = ''
      this.page.pageindex = 1
      this.searWord.section_id = ''
      this.searWord.class_id = ''
      this.searWord.start_time = ''
      this.searWord.end_time = ''
      this.InitFn()
    },
    classList () {
      // 年段
      this.$fetch(this.api.user_sectionindex, {p: this.page.pageindex}).then((response) => {
        if (response.code === 0) {
          this.sectionList = response.list.data
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
      // 班级
      this.$fetch(this.api.user_classesindex, {p: this.page.pageindex}).then((response) => {
        if (response.code === 0) {
          let array_ = {}
          for (let i in response.list.data) {
            let new_array = array_[response.list.data[i].section_id] || []
            new_array.push(response.list.data[i])
            array_[response.list.data[i].section_id] = new_array
          }
          this.classesListNew = array_
          console.log('班级信息:', array_)
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  mounted () {
  }
}
</script>
